<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>01_元素内容操作</title>
		<!-- 01_元素内容操作：元素以及元素内容的部分
		 .html()   ①：无参----功能：获取匹配元素中第一元素的内容
		           ②：有参----功能：【设置】将匹配元素集合中所有元素替换为新元素
				特点:针对 内容+元素
		 .val()    ①：无参----功能：表单内元素：input、select生效
                                   获取表单元素中第一元素的内容
		           ②：有参----功能：表单内元素：input、select生效
				                     input()元素直接显示  value
				                     select()元素不是直接显示 value
									 option 元素中内容：用户显示
									 option 元素中value值
									 必须当前select中，option元素value值
									 直接赋值：打印select元素对象名称[object Object]
	            特点：针对 （表单内form元素可以包裹） 元素的内容
		 .text()   ①：无参----功能：获取匹配元素集合中所有元素的文本内容
		           ②：有参----功能：【设置】匹配元素集合中所有元素的文本内容替换
				特点：元素中存在内容
		 -->
		 <script src="../js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<h1>html()函数使用</h1>
		<button>按钮-针对html()函数-有参</button>
		<span>lorem1</span>
		<span>lorem2</span>
		<h1>val()函数使用</h1>
		<button>按钮-针对val()函数-有参</button>
		<input type="text" value="文本框真实的数据"/>
		<input type="text" value="文本框真实的数据" placeholder="输入框显示效果"/>
		<!-- html：按钮 下拉列表 select>option*3 需要加value-->
		<!-- jq：点击按钮，设置下拉列表的值 html()与val()有参是否存在区别 -->
		<button>按钮-针对val()函数-有参</button>
		<select>
			<option value="rem1">lorem1</option>
			<option value="rem2">lorem2</option>
			<option value="rem3">lorem3</option>
		</select>
		<h1>text()函数使用</h1>
		<button class="btn1">按钮-针对text()函数-无参</button>
		<button class="btn2">按钮-针对text()函数-有参</button>
		<p>lorem4</p>
		<p>lorem5</p>
		<p>lorem6</p>
		
		
		<script>
		   //1.找到 类名为 btn1 的按钮--点击--弹窗内容为 三个 p的	元素内容
		   $(".btn1").click(function(){
		   		var ptext=$("p").text();
					  alert(ptext);
		   });
		   //2.找到 类名为 btn2 的按钮--点击--lorem4\5\6改成 “修改文本”【有参】
		  $(".btn2").click(function(){
		  		$("p").text("修改文本");
			
			
			
			
			
			
			
			
			//$("button").click(function(){
				//抓下拉列表的value值--select()
				//设置元素第一个的值   1.去掉rem，直接设置下拉列表中的value的值
				//$("select").val("rem1");
				//设置元素第一个元素的值  2.给第一个元素添加，设置的内容【本身存在】
				//var rem=$("select").val();
				//[object Object]JavaScript中，对象的默认字符串表示形态
				//select元素  对象  输出[object Object]
				//value的值是真实数据 option中值是显示数据，不可以直接改，改的话用html
				//object Object  测试：无参
				//alert("val()函数有参："+rem)
			});
			
			
			
			//动态效果：点击按钮，获取第一个表单元素的内容，元素打印出来
			//$("button").click(function(){
			//    注意：js变量名不可以为关键字！   in是关键字
			//    var ins=$("input").val();
			//    alert("val()函数无餐" +ins)
			//});
			
			
			
			
			
			
			//有参:点击按钮--下面两个span 改成lorem、lorem
		//$("button").click(function(){
			//$("span").html("")
		//});
		
		
		 
			
			
			//js变量问题【var i=1】==jq变量    var  变量名=值、元素
			//无参数 html() 函数使用
			//var html=$("span").html();
			//  BOM方式  打印数据
			//alert("无参数获取第一个元素内容："+html);
		</script>
	</body>
</html>